<script>
	import { Notyf } from 'notyf';
	import { onMount } from 'svelte';

	let notyf;
	let users = [
		{
			id: -1000,
			account: 'asdf',
			status: '00'
		},
		{
			id: -1001,
			account: '',
			status: '02'
		},
		{
			id: -1002,
			account: '',
			status: '04'
		}
	];

	onMount(() => {
		notyf = new Notyf({
			duration: 3000,
			className: 'x-notification',
			position: { x: 'right', y: 'top' }
		});
		userMgr(null, 'list');
	});

	let userMgr = (e, action, uid) => {
		switch (action) {
			case 'list':
				fetch('/api/user', { method: 'GET' })
					.then((v) => v.json())
					.then((v) => {
						//let d=atob(v.data);
						if (v.status !== 0) {
							notyf.error(v.msg);
							return;
						}

						users = v.users;
					});
				break;
			case 'update':
				if (!uid) {
					return;
				}

				let u = users.find((e) => e.id === uid);
				if (!u) {
					notyf.error(`can't find user by id=${uid}`);
					return;
				}
				let sets = [`id=${u.id}`, `account=${u.account}`, `status=${u.status}`];
				if (u.password) {
					sets.push(`password=${u.password}`);
				}

				let url = `/api/user?${sets.join('&')}`;

				fetch(url, { method: 'PUT' })
					.then((v) => v.json())
					.then((v) => {
						//let d=atob(v.data);
						if (v.status !== 0) {
							notyf.error(v.msg);
							return;
						}

						notyf.success('update success');
						u.password = '';
						users = users;
					});
				break;
			case 'delete':
				if (!uid) {
					return;
				}

				fetch(`/api/user?id=${uid}`, { method: 'DELETE' })
					.then((v) => v.json())
					.then((v) => {
						//let d=atob(v.data);
						if (v.status !== 0) {
							notyf.error(v.msg);
							return;
						}

						notyf.success('delete success');
						userMgr(null, 'list');
					});
				break;
		}
	};
</script>

<div class="main">
	<div class="title">User management</div>
	<button class="button is-primary is-small" on:click={(e) => userMgr(e, 'list')}>list</button>

	<div class="data">
		<div class="table-container">
			<table class="table is-hoverable is-striped">
				<thead>
					<tr>
						<th>id</th>
						<th>account</th>
						<th>pwd</th>
						<th>status</th>
						<th
							style="visibility:hidden">action</th>
					</tr>
				</thead>

				<tbody>
					{#each users as u, i (u.id)}
						<tr>
							<td class="user-id">{u.id}</td>
							<td>
								<input
									class="field-account x-input"
									bind:value={u.account}
								/>
							</td>
							<td>
								<input
									class="field-password x-input"
									bind:value={u.pwd}
									placeholder="Change password"
									/>
							</td>
							<td>
								<select readonly bind:value={u.status}>
										<option value="00">Valid</option>
										<option value="02">Forbidden</option>
										<option value="04">Locked</option>
										<option value="06">Attacker</option>
										<option value="08">Expired</option>
								</select>
							</td>
							<td>
								<div class="control-panel">
									<button 
										class="button is-small"
										on:click={(e) =>
										userMgr(e, 'update', u.id)}>save
									</button>
									<button 
										class="button is-small"
										on:click={(e) =>
										userMgr(e, 'delte', u.id)}>delete
									</button>
								</div>

							</td>
						</tr>
					{/each}
				</tbody>

			</table>
		</div>
	</div>
</div>

<style lang="scss">
	@import 'notyf/notyf.min.css';
	@import 'bulma/css/bulma.css';

	.main {
		display: flex;
		flex-direction: column;
		align-items: center;

			table {
				tbody {
					tr {
						.control-panel {
							visibility: hidden;
							display: flex;

								.btn-wrapper {
									padding: 0 0.2em;
								}
						}

						&:hover {
							.control-panel {
								visibility: visible;
							}
						}
					}
				}
			}
	}
		.x-input {
			border: none;
			outline: none;

			border-radius: 3px;
			border-bottom: 1px solid transparent;
			&:hover {
				border-bottom: 1px solid var(--bulma-primary);
			}

			&:focus {
				border-bottom: 1px solid var(--bulma-primary);
				text-shadow: none;
			}

			&.even {
				background-color: var(--bulma-light);
			}
		}
</style>
